<template>
  <div class="search">
    <!--
        搜索组件一级路由，当前页面总标题；
        $router.back()返回上一个页面；
        left-arrow：是否显示左侧箭头，默认false，
                    当标签填写left-arrow属性时，值为true
    -->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()">
    </van-nav-bar>

    <!--
        搜索框；
        show-action：是否在搜索框右侧显示取消按钮，当不填时，
                     默认false，此时下面的插槽也不会生效；
        shape：搜索框形状，可选值为 round（圆形），默认值为square（方形）；
        v-model.trim：去掉空格；
        @input van-search内部的方法，输入框内容变化时触发
    -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="getSuggestion"
    >
      <!--
          自定义插槽；
          action：自定义右侧内容（搜索框外），设置show-action属性后展示
      -->
      <template #action>
        <!-- 点击搜索，将keyword存入历史记录 -->
        <div @click="clickSearch">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="this.keyword">
      <van-cell v-for="(item,index) in highlightKeyword" :key="index" icon="search">
        <!-- v-html：将html语言翻译成内容 -->
        <div v-html="item" @click="clickHighlightKeyword(index)"/>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <!-- 历史记录 -->
      <van-cell title="历史记录"/>
      <van-cell v-for="(item,index) in history" :key="item" :title="item" @click="clickHistory(item)">
        <!--
            后面加上图标，用于删除历史记录;
            @click.stop：点击删除时，不会触发van-cell中的所有点击事件
        -->
        <van-icon name="close" @click.stop="deleteHistory(index)"/>
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
  // 按需引入搜索模块API
  import { reqGetSuggestion } from '@/api/search.js'
  // 按需引入操作本地localStorage方法
  import { setHistory, getHistory } from '@/utils/storage.js'

  export default {
    name: 'Search',
    data () {
      return {
        // 搜索关键字
        keyword: '',
        // 搜索联想结果
        suggestion: [],
        // 历史搜索记录，从本地localStorage中获取
        history: getHistory(),
        // 接口发送等待时间
        timeId: null
      }
    },
    // 计算属性
    computed: {
      // 搜索联想高亮关键词处理
      highlightKeyword () {
        // g开启全局匹配, i忽略大小写
        // const regExp = new RegExp(this.keyword, 'gi')
        // 循环遍历联想结果
        // return this.suggestion.map(e => {
        //   // 文本替换
        //   // 1. match 匹配的内容
        //   // 2. 返回值, 就表示要替换的内容
        //   const str = e.replace(regExp, (match) => {
        //     return `<span style="color: #e92322;">${match}</span>`
        //   })
        //   return str
        // })
        return this.suggestion.map(e => e.replace(new RegExp(this.keyword, 'gi'), (val) => `<span style="color: #e92322">${val}</span>`))
      }
    },
    methods: {
      // 搜索联想
      async getSuggestion () {

        // 对发送的接口进行延迟执行
        // 发送前先重制时间
        clearTimeout(this.timeId)

        // 不会立刻执行, 先等等看, 在一定时间内没有再次触发, 才执行 (类似于: 黑车拉客, 会等一等, 实在没人了, 就开)
        this.timeId = setTimeout(async () => {
          // 1.参数校验
          if (this.keyword === '') {
            this.suggestion = []
            return
          }
          // 2.调用接口
          const res = await reqGetSuggestion(this.keyword)
          // 狗后端查不出结果时，给集合第一个元素赋值null，此时集合不为空，但元素为null，
          // 我replace函数高亮关键词时匹配到null直接报错
          this.suggestion = res.data.data.options[0] === null ? [] : res.data.data.options
        }, 300)
      },

      // 点击搜索按钮
      clickSearch () {
        if (this.keyword === '') {
          return
        }
        // 将keyword存入历史记录
        this.addHistory(this.keyword)
        this.$router.push('/searchResult?keyword=' + this.keyword)
      },

      // 点击历史记录
      clickHistory (item) {
        this.addHistory(item)
        // 路由跳转，并携带参数
        this.$router.push('/searchResult?keyword=' + item)
      },

      // 点击联想
      clickHighlightKeyword (index) {
        // 根据索引获取联想集合中到元素，并添加到历史记录中
        this.addHistory(this.suggestion[index])
        // 路由跳转，并携带参数
        this.$router.push('/searchResult?keyword=' + this.suggestion[index])
      },

      // 将搜索框内容添加到历史搜索记录中
      addHistory (str) {
        // 在集合开头添加历史记录
        this.history.unshift(str)
        // new Set去重˚
        this.history = [...new Set(this.history)]

        // 将历史搜索记录存放到本地localStorage中
        setHistory(this.history)
      },

      // 删除历史记录
      deleteHistory (index) {
        // 根据指定下标删除，删除一位元素
        this.history.splice(index, 1)

        // 将历史搜索记录存放到本地localStorage中
        setHistory(this.history)
      }

    },
  }
</script>

<style scoped>

</style>
